<template>
  <div id="container-line"></div>
</template>

<script>
import { Line } from "@antv/g2plot";

var line = null;

export default {
  name: "WordDataLine",
  props: {
    data: [],
  },  mounted() {
    line = new Line("container-line", {
      data: this.$props.data,
      padding: "auto",
      xField: "date",
      yField: "time",
      smooth: true,
      color: "rgba(255, 255, 255, 0.9)",
      lineStyle: {
        lineWidth: 2,
        shadowColor: "rgba(255, 255, 255, 0.3)",
        shadowOffsetY: 2,
        shadowOffsetX: 0,
        shadowBlur: 8,
      },
      point: {
        size: 4,
        shape: 'circle',
        style: {
          fill: "rgba(255, 255, 255, 0.9)",
          stroke: "rgba(255, 255, 255, 0.6)",
          lineWidth: 1,
        },
      },
      xAxis: {
        grid: null,
        line: null,
        tickLine: null,
        label: null,
      },
      yAxis: {
        grid: null,
        line: null,
        tickLine: null,
        label: null,
      },
    });
    line.render();
  },
  updated() {
    line.changeData(this.$props.data);
  },
};
</script>

<style scoped>
#container-line {
  width: 100%;
  max-height: 120px;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

#container-line:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}
</style>